<template>
  <view class="container">
    <view class="form">
      <text class="title">登录</text>
      
      <!-- 固定显示用户名，不允许修改 -->
      <view class="input-item">
        <text class="label">用户名：</text>
        <text class="value">{{ username }}</text>
      </view>

      <!-- 固定显示密码，不允许修改 -->
      <view class="input-item">
        <text class="label">密码：</text>
        <text class="value">******</text>
      </view>

      <button class="btn" type="primary" @click="handleLogin">登录</button>
      
      <view class="link">
        <text>没有账号？</text>
        <!-- 使用 uni.navigateTo 进行非 tabBar 页面跳转 -->
        <navigator url="/pages/Register/Register" open-type="navigate">去注册</navigator>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "LoginPage",
    data() {
      return {
        // 固定的用户名和密码
        username: 'ssy',
        password: '123456' 
      };
    },
    methods: {
      /**
       * 处理登录逻辑
       */
      handleLogin() {
        console.log('开始执行登录...');
        setTimeout(() => {
          // 直接验证固定的账号密码
          if (this.username && this.password) {
            uni.showToast({
              title: '登录成功',
              icon: 'success',
              duration: 1500 // 提示框显示时间，单位ms
            });
            
            console.log('登录成功，跳转到首页...');
            
            // 延迟跳转，确保用户能看到成功提示
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/cardViewPage/cardViewPage"
              });
            }, 1500);
            
          } else {
            uni.showToast({
              title: '账号或密码不能为空',
              icon: 'none'
            });
          }
        }, 500);
      }
    }
  }
</script>

<style scoped>
  /* 使用 scoped 属性确保样式只作用于当前组件 */
  .container {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .form {
    width: 100%;
    max-width: 400px;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  .title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
  }

  .input-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
  }
  
  .label {
    flex-shrink: 0;
    width: 70px;
    font-size: 14px;
    color: #666;
  }
  
  .value {
    flex: 1;
    font-size: 14px;
    color: #333;
  }

  .btn {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-radius: 6px;
    margin-top: 20px;
  }

  .link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #999;
  }

  .link navigator {
    color: #007aff; /* uni-app 默认的主题蓝色 */
    text-decoration: none;
  }
</style>